<template>
  <section>
    <form autocomplete="off" class="ivu-form ivu-form-label-right">
      <div class="ivu-form-item flex-row flex-align-c">
        <label class="ivu-form-item-label" style="width: 68px">是否开启</label>
        <el-switch
          active-value="1"
          inactive-value="2"
          v-model="custormItemData.params.open"
        ></el-switch>
      </div>
      <div class="ivu-form-item flex-row flex-align-c">
        <label class="ivu-form-item-label" style="width: 68px">广告类型</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-radio-group
              v-model="custormItemData.params.type"
              @change="changeSave"
            >
              <el-radio label="1" style="font-size: 12px">图片</el-radio>
              <el-radio label="2" style="font-size: 12px">商品</el-radio>
              <el-radio label="3" style="font-size: 12px">活动</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div
        class="ivu-form-item flex-row flex-align-c"
        v-if="custormItemData.params.type === '3'"
      >
        <label class="ivu-form-item-label" style="width: 68px">活动类型</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-select
              size="small"
              v-model="custormItemData.params.active"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div
        class="ivu-form-item flex-row flex-align-c"
        v-if="custormItemData.params.type !== '1'"
      >
        <label class="ivu-form-item-label" style="width: 68px">弹窗样式</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-radio
              v-model="custormItemData.params.pattern"
              label="1"
              style="font-size: 12px"
              >默认</el-radio
            >
            <el-radio
              v-model="custormItemData.params.pattern"
              label="2"
              style="font-size: 12px"
              >自定义</el-radio
            >
          </div>
        </div>
      </div>
      <div class="ivu-form-item">
        <label class="ivu-form-item-label" style="width: 68px">广告图</label>
        <div class="ivu-form-item-content" style="margin-left: 68px">
          <div style="align-self: start; margin-left: -70px">
            <div class="clearfix">
              <div class="clearfix pull-left dis-flex flex-col">
                <div class="uploadSource solid">
                  <!-- :style="{'background-image':`url(${getPath(item.thumb.file_path)})` -->
                  <div
                    @click="uploadtoggle({ toggle: 'image' })"
                    class="img"
                    :style="{
                      'background-image': `url(${getPath(
                        custormItemData.params.thumb.file_path
                      )})`,
                    }"
                  ></div>
                </div>
                <span
                  v-if="custormItemData.params.type === '3'"
                  class="help-text"
                  style="margin-top: 5px"
                  >建议图片尺寸640*655</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ivu-form-item">
        <label class="ivu-form-item-label" style="width: 68px">{{
          linkeMap[custormItemData.params.type]
        }}</label>
        <div class="ivu-form-item-content" style="margin-left: 68px">
          <div class="readonly-div" @click="uploadtoggle">
            <div
              class="readonly width-195 ivu-input-wrapper ivu-input-wrapper-default ivu-input-type"
            >
              <i
                class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"
              ></i>
              <input
                v-if="custormItemData.params.type == '1'"
                autocomplete="off"
                :value="
                  typeof custormItemData.params.link === 'string'
                    ? custormItemData.params.link
                    : custormItemData.params.link.path
                "
                spellcheck="false"
                type="text"
                placeholder="请选择链接"
                readonly="readonly"
                class="ivu-input ivu-input-default"
              />
              <input
                v-if="custormItemData.params.type == '2'"
                autocomplete="off"
                :value="$hasData ? custormItemData.data[0]['goods_name'] : ''"
                spellcheck="false"
                type="text"
                placeholder="请选择链接"
                readonly="readonly"
                class="ivu-input ivu-input-default"
              />
              <input
                v-if="custormItemData.params.type == '3'"
                autocomplete="off"
                :value="$hasData ? custormItemData.data[0]['luck_title'] : ''"
                spellcheck="false"
                type="text"
                placeholder="请选择链接"
                readonly="readonly"
                class="ivu-input ivu-input-default"
              />
            </div>
            <i
              class="icon icon-fujian readonly-icon"
              style="left: 12px; margin-top: -3px"
            ></i>
          </div>
        </div>
        <div class="flex-row choose-item-lits" v-if="custormItemData.params.type === '2'">
          <div
            v-for="(item, index) in this.custormItemData.data"
            :key="index"
            class="choose-item-child"
          >
            <img
              :src="
                item.file_path || (item.image && item.image[0]['file_path'])
              "
              alt=""
              class="small"
            />
            <i
              class="delete el-icon-close"
              @click="delItemList({ data: custormItemData.data, index })"
              style="font-size: 16px"
            ></i>
          </div>
        </div>
      </div>
      <div
        class="ivu-form-item flex-row flex-align-c"
        v-if="
          custormItemData.params.type === '3' &&
          custormItemData.params.pattern === '2'
        "
      >
        <label class="ivu-form-item-label" style="width: 68px">参与用户</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-radio
              v-model="custormItemData.params.join_user"
              label="1"
              style="font-size: 12px"
              >显示</el-radio
            >
            <el-radio
              v-model="custormItemData.params.join_user"
              label="2"
              style="font-size: 12px"
              >隐藏</el-radio
            >
          </div>
        </div>
      </div>
      <div class="ivu-form-item flex-row flex-align-c" v-if="$hasTime">
        <label class="ivu-form-item-label">倒计时结束时间</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-date-picker
              :picker-options="pickerOptions"
              size="small"
              value-format="timestamp"
              v-model="custormItemData.params.overtime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="ivu-form-item flex-row flex-align-c">
        <label class="ivu-form-item-label" style="width: 68px">显示类型</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-radio
              v-model="custormItemData.params.status"
              label="1"
              style="font-size: 12px"
              >仅首次</el-radio
            >
            <el-radio
              v-model="custormItemData.params.status"
              label="3"
              style="font-size: 12px"
              >多次</el-radio
            >
            <el-radio
              v-model="custormItemData.params.status"
              label="2"
              style="font-size: 12px"
              >每次</el-radio
            >
          </div>
        </div>
      </div>
      <div
        class="ivu-form-item flex-row flex-align-c"
        v-if="custormItemData.params.status === '3'"
      >
        <label class="ivu-form-item-label" style="width: 68px">显示次数</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-input
              @blur="notZero(custormItemData.params, 'rate', { zero: '' })"
              @input.native="
                clearNativeReg(custormItemData.params, 'rate', 1, -1, 1, {
                  zero: '',
                })
              "
              v-model="custormItemData.params.rate"
            >
              <template slot="append">次</template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="ivu-form-item flex-row flex-align-c">
        <label class="ivu-form-item-label" style="width: 68px">关闭按钮</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-radio
              v-model="custormItemData.params.close"
              label="1"
              style="font-size: 12px"
              >显示</el-radio
            >
            <el-radio
              v-model="custormItemData.params.close"
              label="2"
              style="font-size: 12px"
              >隐藏</el-radio
            >
          </div>
        </div>
      </div>
      <div
        class="ivu-form-item flex-row flex-align-c"
        v-if="custormItemData.params.close == 1"
      >
        <label class="ivu-form-item-label" style="width: 68px">按钮位置</label>
        <div class="ivu-form-item-content" style="padding-top: 4px">
          <div
            class="ivu-radio-group ivu-radio-group-default ivu-radio-default flex-row flex-align-c"
          >
            <el-radio
              v-model="custormItemData.params.position"
              label="1"
              style="font-size: 12px"
              >位置一</el-radio
            >
            <el-radio
              v-model="custormItemData.params.position"
              label="2"
              style="font-size: 12px"
              >位置二</el-radio
            >
          </div>
        </div>
      </div>
    </form>
  </section>
</template>

<script>
import defaultConfig from "./utils/editConfig";
import activeChoose from "./utils/activeChoose";
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function () {
        return defaultConfig;
      },
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      linkeMap: {
        1: "设置链接",
        2: "选择商品",
        3: "选择活动",
      },
      typeOptions: [
        {
          label: "抽奖",
          value: "lottery",
        },
      ],
      chooseTypeMap: {
        1: "1",
        2: "goods",
      },
      thumbMap: {
        1: "default_picture.png",
        2: "goods-bg.png",
        3: "lottery-bg.png",
      },
      toggleMap: {
        1: "link",
        2: "chooseGoods",
        3: "link",
      },
    };
  },
  computed: {
    $link_config() {
      const {
        params: { type, active },
      } = this.custormItemData;
      const link_type = type !== "3" ? this.chooseTypeMap[type] : active;
      return { link_type, choose_type: "1" };
    },
    $toggleType() {
      const {
        params: { type },
      } = this.custormItemData;
      return this.toggleMap[type];
    },
    $hasTime() {
      const {
        data,
        params: { type, pattern },
      } = this.custormItemData;
      if (Array.isArray(data) && data.length > 0) {
        const [{ sale_type }] = data;
        console.log("sale_type+++++++++++", sale_type);
        // return `${type}` === '2' && `${pattern}` === '2' && typeof sale_type === 'number' && sale_type === 0
        return (
          `${type}` === "2" &&
          `${pattern}` === "2" &&
          typeof sale_type === "number" &&
          sale_type === 0
        );
      }
    },
    $hasData() {
      const { data } = this.custormItemData;
      return Array.isArray(data) && data.length > 0;
    },
  },
  methods: {
    clearChooseRadio: activeChoose.clearChooseRadio,
    changeSave(val) {
      console.log(val, this.thumbMap[`${val}`]);
      this.custormItemData.params.thumb.file_path = this.thumbMap[`${val}`];
      this.clearChooseRadio(({ params: { active } }) => {
        active === "" &&
          (this.custormItemData.params.active = this.typeOptions[0]["value"]);
      });
    },
    uploadtoggle({ toggle }) {
      const { link_type, choose_type } = this.$link_config;
      const params = {
        editKey: this.custormItemData.key,
        params_type: "periods_radio",
      };
      const data = this.custormItemData.params.link;
      // const chooseRadiio="ridio_luck"
      if (link_type !== "chooseGoods") {
        params.link_type = link_type;
        params.choose_type = choose_type;
      }

      this.output({ type: toggle || this.$toggleType, params, data });
    },
  },
};
</script>

<style lang="scss" scoped>
.ivu-modal-body.otheradvert-show {
  .help-text {
    color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: normal;
  }
  .choose-item-lits {
    padding-top: 20px;
    flex-wrap: wrap;
    margin-bottom: -20px;
    margin-left: 68px;
    .choose-item-child {
      margin: 0 9px 10px 0;
      border-radius: 4px;
      border: 1px solid #ededed;
      width: 50px;
      height: 50px;
      line-height: 50px;
      position: relative;
      cursor: pointer;

      img.small {
        width: 48px;
        max-height: 100%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }

      .delete {
        position: absolute;
        top: -6px;
        right: -6px;
        display: none;
        cursor: pointer;
      }

      &:hover {
        .delete {
          display: inline-block;
        }
      }
    }
  }
  padding: 16px 20px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  max-height: 500px;
  min-height: 108px;
  overflow-y: auto;
  max-height: 620px;
  overflow: auto;

  * {
    text-decoration: none;
    list-style: none;
  }

  *,
  :after,
  :before {
    box-sizing: border-box;
  }

  .clearfix:after {
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    content: "";
    clear: both;
  }

  .ivu-modal-wrap * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .advertisement-modal {
    padding: 0 30px;
  }

  .ivu-form-item {
    margin-bottom: 20px;
    vertical-align: top;
    zoom: 1;
  }

  .ivu-form-item:after,
  .ivu-form-item:before {
    content: "";
    display: table;
  }

  .ivu-form-item:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

  .ivu-form .ivu-form-item-label {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
    float: left;
    font-size: 12px;
    color: #666;
    line-height: 1;
    padding: 10px 20px 10px 0;
    box-sizing: border-box;
  }

  .ivu-form-item-content {
    position: relative;
    line-height: 32px;
    font-size: 12px;
  }

  .ivu-switch {
    display: inline-block;
    width: 40px;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    vertical-align: middle;
    border: 1px solid #ccc;
    background-color: #ccc;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  .uploadSource {
    line-height: 80px;
  }

  .uploadSource {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border: 1px dashed #ededed;
    text-align: center;
    color: #dad9d9;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
    position: relative;
  }

  .uploadSource.solid {
    border: 1px solid #ededed;
  }

  .uploadSource .delete {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
  }

  .uploadSource .img {
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }

  .uploadSource .change {
    display: none;
    height: 20px;
    line-height: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .advertisement-modal .general-modal-right .readonly-div {
    position: relative;
  }

  .ivu-input-icon {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    color: #999;
    position: absolute;
    right: 0;
    z-index: 3;
  }

  .ivu-input-hide-icon .ivu-input-icon,
  .ivu-input-icon-clear,
  .ivu-input-icon-validate {
    display: none;
  }

  .advertisement-modal .general-modal-right .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    cursor: pointer;
    height: 32px;
    line-height: 1.5;
    padding: 4px 12px;
    padding-left: 18px;
    font-size: 12px;
  }

  .advertisement-modal .general-modal-right .readonly-div .readonly-icon {
    color: #a7a8aa;
    position: absolute;
    top: 3px;
    left: 80px;
  }

  .ivu-radio-group {
    font-size: 12px;
    vertical-align: middle;
  }

  .ivu-radio-wrapper {
    font-size: 12px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    margin-right: 20px;
    cursor: pointer;
  }

  .ivu-radio {
    display: inline-block;
    margin-right: 8px;
    white-space: nowrap;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
  }

  .ivu-radio-inner {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    top: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid #dddee1;
    border-radius: 50%;
  }

  .ivu-radio-input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
  }

  span.ivu-radio + * {
    margin-left: 2px;
    margin-right: 2px;
  }

  .el-radio__label {
    font-size: 12px;
  }
}
</style>
